<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>工作流</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
	<div>
		<button onclick="writeForm()">填写请假单</button>
		<button class="log" onclick="logout()">退出</button>
	</div>
	<table th:if="${forms.size()}>0">
		<thead>
			<tr>
				<td>请假标题</td>
				<td>请假内容</td>
				<td>请假人</td>
				<td>状态</td>
				<td>操作</td>
			</tr>
		</thead>
		<tr th:each="form:${forms}">
			<td th:text="${form.title}"></td>
			<td th:text="${form.content}"></td>
			<td th:text="${form.applicant}"></td>
			<td th:text="${form.state}"></td>
			<td>
				<button th:if="${form.state} == '填写请假单'"
					th:onclick="'javascript:apply(\''+${form.id}+'\')'">申请请假</button>
				<button th:if="${form.state} == '填写请假单'"
					th:onclick="'javascript:giveup(\''+${form.id}+'\')'">放弃请假</button>
				<button th:onclick="'javascript:checkState(\''+${form.id}+'\')'"  data-toggle="modal" data-target="#myModal">查看流程</button>
			</td>
		</tr>
	</table>
	<div th:if="${forms.size()}==0">
		<br />暂无请假数据
	</div>



	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">流程</h4>
				</div>
				<div class="modal-body">
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

<style>
body{
	margin:10px 10px 100px 10px;
}
* {
	font-family: "微软雅黑";
	font-size: 15px;
}

td {
	padding: 5px 10px;
	border: 1px solid #ccc;
}

button {
	padding: 5px;
	margin: 5px 0;
	border: 1px solid #aaa;
	border-radius: 4px;
}

.log {
	float: right;
	padding: 5px 8px;
	background: #ec5757;
	color: #fff;
}
</style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" />
<script
	src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
	function writeForm() {
		location.href = "/form";
	}

	function logout() {
		$.ajax({
			url : "/logout",
			success : function(data) {
				if (data.code == 200) {
					location.href = "/";
				}
			}
		});
	}

	function apply(formId) {
		var operator = getUser();
		if (operator == "") {
			location.href = "/";
		}
		$.ajax({
			url : "/apply",
			data : {
				"formId" : formId,
				"operator" : operator
			},
			success : function(data) {
				if (data.code == 200) {
					location.href = "/home";
				}
			}
		});
	}

	function giveup(formId) {
		var operator = getUser();
		if (operator == "") {
			location.href = "/";
		}
		$.ajax({
			url : "/giveup",
			data : {
				"formId" : formId,
				"operator" : operator
			},
			success : function(data) {
				if (data.code == 200) {
					location.href = "/home";
				}
			}
		});
	}

	function checkState(formId) {
		$.ajax({
			url : "/historyState",
			data : {
				"formId" : formId
			},
			success : function(data) {
				if (data.code == 200) {
					var processList = data.info;
					var html = "";
					$.each(processList, function(i,item){
						html += "<span>"+item.name+"(操作人："+item.operator+")"+"</span><br/><br/>";
					});
					$(".modal-body").html(html);
				}
			}
		});
	}

	function getUser() {
		var name = "userInfo=";
		var user = "";
		var ca = document.cookie.split(';');
		$.each(ca, function(i, item) {
			if (item.indexOf(name) != -1) {
				user = item.substring(name.length, item.length);
			}
		});
		return user;
	}
</script>